<template>
    <div class="my-outbox">
        <div class="my-inbox" ref='box'>
            <div class="my-list" :class="{'textr':!ismarquee}" :key='1'>
               {{sendVal}}
            </div>
            <div v-if="ismarquee" class="my-list" :key='200'>
                {{sendVal}}
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name:'my-marquee-left',
        props:{
            sendVal:String,
            vleft:String
        },
        data() {
            return {
              ismarquee:false
            }
        },
        mounted:function(){
            let that = this;
            let target = this.$refs.box;
            let initLeft = 0;
            setInterval(function(){
              if(that.ismarquee == true){
                initLeft ++;
                if(initLeft >= target.offsetWidth / 2 ){
                    initLeft = 0;
                }
                target.style = 'transform: translateX(-'+ initLeft +'px)';
              }else if(that.ismarquee == false){
                return false;
              }

            },parseInt(that.vleft))
        },
        methods:{
          start(){
            this.ismarquee = true
          },
          stop(){
            this.ismarquee = false
          }
        }
    }
</script>

<style scoped="scoped">
.my-outbox {
  overflow: hidden;
  height: 35px;
  position: relative;
}
.my-outbox .my-inbox {
  white-space: nowrap;
  position: absolute;
  font-size: 0;
}
.my-outbox .my-inbox .my-list {
  margin-right: 15px;
  display: inline-block;
  font-size: 0.1rem;
}
.textr{
  text-align: right;
   min-width: 1.03rem;
}
</style>
